<template>
    <ContentFileld>
        <table class="table table-striped" >
            <thead>
            <tr>
                <th scope="col">A</th>
                <th scope="col">B</th>
                <th scope="col">对局结果</th>
                <th scope="col">对局时间</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="record in records" :key="record.record.id">
                <td>
                    <img :src="record.a_photo" alt="" class="user-photo">
                    &nbsp;
                    <span class="username">{{ record.a_username }}</span>
                </td>
                <td>
                    <img :src="record.b_photo" alt="" class="user-photo">
                    &nbsp;
                    <span class="username">{{ record.b_username }}</span>
                </td>
                <td>{{ record.result }}</td>
                <td>{{ record.record.createTime }}</td>
                <td>
                    <button @click="open_record_content(record.record.id)" type="button" class="btn btn-primary">
                        查看录像
                    </button>
                </td>
            </tr>

            </tbody>
        </table>


        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
                <li class="page-item">
                    <a class="page-link" @click="click_page(-2)" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number"
                    @click="click_page(page.number)">
                    <a class="page-link" href="#">{{ page.number }}</a>
                </li>

                <li class="page-item">
                    <a class="page-link" @click="click_page(-1)" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>


    </ContentFileld>
</template>

<script>
import ContentFileld from '@/components/ContentFileld.vue';
import $ from "jquery";
import {useStore} from "vuex";
import {ref} from "vue";
import {useRouter} from "vue-router";

export default {
    name: "recordIndex",
    components: {
        ContentFileld,
    },

    setup() {
        let current_page = 1;
        let total_records = 1;
        let store = useStore();
        let records = ref([]);
        let pages = ref([]);
        let router = useRouter();
        const get_list_page = (page) => {
            current_page=page;
            $.ajax({
                url: "http://localhost:3000/record/getlist",
                type: "get",
                data: {
                    page,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    console.log(resp)
                    records.value = resp.record_list;
                    total_records = resp.records_count;
                    update_pages();
                },
                error(resp) {
                    console.log(resp)
                }
            })
        }
        get_list_page(current_page);

        const stringTo2D = (map) => {
            let g = [];
            for (let i = 0, k = 0; i < 13; i++) {
                let line = [];
                for (let j = 0; j < 14; j++, k++) {
                    if (map[k] === '0') line.push(0);
                    else line.push(1);
                }
                g.push(line);
            }
            return g;
        }

        const open_record_content = (recordId) => {
            for (const record of records.value) {
                if (record.record.id == recordId) {
                    store.commit("updateIsRecord", true);
                    console.log(store.state.record.is_record);
                    store.commit("updateGame", {
                        map: stringTo2D(record.record.map),
                        a_id: record.record.aid,
                        a_sx: record.record.asx,
                        a_sy: record.record.asy,
                        b_id: record.record.bid,
                        b_sx: record.record.bsx,
                        b_sy: record.record.bsy,
                    });
                    store.commit("updateSteps", {
                        a_steps: record.record.asteps,
                        b_steps: record.record.bsteps,
                    });
                    store.commit("updateRecordLoser", record.record.loser);

                    router.push({
                        name: "record_content",
                        params: {
                            recordId
                        }
                    });
                    break;
                }
            }
        }

        const update_pages = () => {
            let max_pages = parseInt(Math.ceil(total_records / 10));
            let new_pages = [];
            let start_page = Math.max(current_page - 2, 1);
            let end_page = Math.min(current_page + 2, max_pages);

            // 如果页码不足5个，调整开始和结束的页码
            if (end_page - start_page < 4) {
                if (start_page === 1) {
                    end_page = Math.min(5, max_pages);
                } else if (end_page === max_pages) {
                    start_page = Math.max(1, max_pages - 4);
                }
            }

            for (let i = start_page; i <= end_page; i++) {
                new_pages.push({
                    number: i,
                    is_active: i === current_page ? "active" : "",
                });
            }

            pages.value = new_pages;
        };


        const click_page = page => {
            if (page === -2) page = current_page - 1;
            else if (page === -1) page = current_page + 1;
            let max_pages = parseInt(Math.ceil(total_records / 10));

            if (page >= 1 && page <= max_pages) {
                get_list_page(page);
            }
        }


        return {
            records,
            open_record_content,
            click_page,
            pages
        }
    }
};
</script>

<style>
.user-photo {
    width: 4vh;
    border-radius: 50%;
}
</style>
